/*清除元素默认的内外边距  */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*让所有斜体 不倾斜*/
em,
i {
  font-style: normal;
}
/*去掉列表前面的小点*/
li {
  list-style: none;
}
/*图片没有边框   去掉图片底侧的空白缝隙*/
img {
  border: 0; /*ie6*/
  vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {
  cursor: pointer;
}
/*取消链接的下划线*/
a {
  color: #666;
  text-decoration: none;
}

a:hover {
  color: #e33333;
}
h4 {
  font-weight: 400;
}
body {
  background: url(../images/bg.jpg) no-repeat 0 0 / cover;
}
/* 当屏幕小于 1024 像素时，固定 rem 的尺寸不再随屏幕变化 */
@media screen and (max-width: 1024px) {
  html {
    font-size: 42.66px !important;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}
/* 最外层容器 */
.container {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  min-height: 780px;
  margin: 0 auto;
  padding: 0.5rem 0.25rem 0;
  background: url(../images/logo.png) no-repeat 0 0 / contain;
}

.column {
  flex: 3;
}

/* 第2个 column */
.column:nth-child(2) {
  flex: 4;
  /* 上 左右 下 */
  margin: 0.4rem 0.25rem 0;
}

/* 定义背景图片的样式 */
.panel {
  position: relative;
  height: .78125rem;
  margin-bottom: .104167rem;
  color: #fff;
  border-style: solid;
  border-image-source: url(../images/border.png);
  border-image-slice: 51 38 20 132;
  border-image-width: .265625rem .197917rem .104167rem .6875rem;
}
/* 每个盒子的样式 */
.l1 {
  height: .78125rem;
}
.l2 {
  height: 2.864583rem;
}
.l3 {
  height: 1.5625rem;
}
.m1 {
  border: 0;
  background-color: rgba(255, 255, 255, .1);
  height: 2.864583rem;
}
.m2 {
  height: 2.083333rem;
}
.r1 {
  height: 1.041667rem;
}
.r2 {
  height: 1.5625rem;
}
.r3-box {
  display: flex;
  justify-content: space-between;
}
.r3 {
  width: 48%;
  height: 1.041667rem;
}
.r4 {
  height: 1.5625rem;
}
/* 向上滚动的动画 */
@keyframes move {
  0% {}
  100% {
    transform: translateY(-50%);
  }
}
#test {
  /* move：动画的名称
    15s：动画的速度
    linear：匀速运动
    0s：马上执行动画
    infinite: 无限执行
   */
  animation: move 15s linear 0s infinite;
}
/* 鼠标放上时，动画暂停 */
#test:hover {
  animation-play-state: paused;
}